<template>
  <view class="container">
    <form @submit="submitForm">
      <view class="form-group">
        <text class="label">标题:</text>
        <input v-model="title" placeholder="请输入标题" required />
      </view>

      <view class="form-group">
        <text class="label">作者:</text>
        <input v-model="author" placeholder="请输入作者" required />
      </view>

      <view class="form-group">
        <text class="label">简介:</text>
        <textarea v-model="summary" placeholder="请输入简介" required></textarea>
      </view>

      <view class="form-group">
        <text class="label">分类:</text>
        <input v-model="category" placeholder="请输入分类" required />
      </view>

      <view class="form-group">
        <text class="label">图片封面:</text>
        <button type="primary" @click="chooseAndSaveImage">选择图片</button>
       <image  :src="coverImageUrl ? coverImageUrl : defaultImageUrl" mode="aspectFit" class="cover-image"></image>
      </view>
	   <view class="form-group2">
	     <text class="label2">内容:</text>
	     <textarea
	       v-model="content"
	       placeholder="请输入内容"
	       required
	       class="textarea-box2"
	     ></textarea>
	   </view>
      <button formType="submit" type="primary" class="submit-button">提交</button>
    </form>
  </view>
</template>

<script>
	import { addArticle } from '@/api/plant/article.js'
export default {
  data() {
    return {
	defaultImageUrl:'/static/fss-image/moren.jpg',
      title: '',
      author: '',
      summary: '',
	  content:'',
      category: '',
      coverImageUrl: ''
    };
  },
  methods: {
    
	 chooseAndSaveImage() {
	      uni.chooseImage({
	        count: 1, 
	        sizeType: ['original', 'compressed'],
	        sourceType: ['album', 'camera'],
	        success: (chooseImageRes) => {
	          const tempFilePaths = chooseImageRes.tempFilePaths;
	          const tempFilePath = tempFilePaths[0];
	
	          uni.uploadFile({
	            url: 'http://localhost:8080/article/upload', // 后端上传图片的接口地址
	            filePath: tempFilePath,
	            name: 'file',
	            //formData: {},
	            success: (uploadRes) => {
					console.log(uploadRes)
	              const response = JSON.parse(uploadRes.data);
	              if (response.success) {
	                this.coverImageUrl = response.url;
	              } else {
	                uni.showToast({
	                  title: '上传图片失败',
	                  icon: 'none'
	                });
	              }
	            },
	            fail: (err) => {
	              console.error('上传图片失败:', err);
	            }
	          });
	        },
	        fail: (err) => {
	          console.error('选择图片失败:', err);
	        }
	      });
	    },
	//   chooseAndSaveImage() {
	     
	//       uni.chooseImage({
	//         count: 1, 
	//         sizeType: ['original', 'compressed'],
	//         sourceType: ['album', 'camera'],
	//         success: (chooseImageRes) => {
	//           const tempFilePaths = chooseImageRes.tempFilePaths;
	//           console.log(chooseImageRes.tempFilePaths[0])
	          
	// 		   const parts = chooseImageRes.tempFilePaths[0].split('/');
			        
	// 		    const fileName = parts[parts.length - 1];
				 
	//           uni.saveFile({
	//             tempFilePath: chooseImageRes.tempFilePaths[0],
	//             success: (saveFileRes) => {
	//               const savedFilePath = saveFileRes.savedFilePath;
	              
	// 							uni.getSavedFileInfo({
	// 							  filePath: savedFilePath, 
	// 							  success: function (res) {
	// 								console.log(res.size);
	// 								console.log(res.createTime);
									
	// 							  }
	// 							});
	        
	// 			  console.log(savedFilePath)
	//               this.coverImageUrl=savedFilePath
	//             },
	//             fail: (err) => {
	//               console.error('保存图片失败:', err);
	//             }
	//           });
	//         },
	//         fail: (err) => {
	//           console.error('选择图片失败:', err);
	//         }
	//       });
	//     },
	
	
	
	
    submitForm() {
      if (!this.title || !this.author || !this.summary || !this.category || !this.coverImageUrl) {
        uni.showToast({
          title: '请填写所有必填项',
          icon: 'none'
        });
        return;
      }

      const articleData = {
        title: this.title,
        author: this.author,
        summary: this.summary,
        category: this.category,
		content:this.content,
        coverImage: this.coverImageUrl
      };

console.log(articleData)
      // 调用后端 API 提交数据
      this.submitToBackend(articleData);
    },
    async submitToBackend(articleData) {
		try{
			await addArticle(articleData)
			uni.showToast({
			  title: '上传成功',
			  icon: 'success'
			});
		}catch(e)
		{
			console.log("失败")
		}
         
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.label {
  font-weight: bold;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  height: 50px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.cover-image {
  width: 100%;
  height: 200px;
  margin-top: 10px;
}

.submit-button {
  width: 100%;
  padding: 10px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
}

.form-group2 {

  margin-bottom: 16px; /* 控制组与其他内容的间距 */
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 垂直居中对齐 */
}


.form-group2 {
  margin-bottom: 16px; /* 表单组的底部间距 */
  display: flex; /* 使用 Flex 布局 */
  align-items: flex-start; /* 垂直顶部对齐 */
}

.label2 {
  margin-right: 12px; /* 标签与输入框的间距 */
  font-size: 16px; /* 标签文字大小 */
  font-weight: bold; /* 字体加粗 */
  color: #333; /* 深灰色文字 */
  line-height: 1.5; /* 标签的行高 */
}

.textarea-box2 {
  flex: 1; /* 自动调整宽度 */
  height: 120px; /* 设置默认高度 */
  padding: 10px; /* 输入框的内边距 */
  border: 1px solid #ccc; /* 边框颜色 */
  border-radius: 4px; /* 圆角效果 */
  font-size: 14px; /* 文本字体大小 */
  color: #333; /* 文本颜色 */
  background-color: #fff; /* 背景颜色 */
  resize: vertical; /* 允许用户调整高度 */
  transition: border-color 0.3s ease; /* 聚焦时边框效果 */
  overflow-y: auto; /* 自动处理超出内容 */
}

.textarea-box2:focus {
  border-color: #409EFF; /* 聚焦时边框高亮 */
  outline: none; /* 移除默认的聚焦边框 */
  box-shadow: 0 0 5px rgba(64, 158, 255, 0.5); /* 增加阴影效果 */
}

.textarea-box2::placeholder {
  color: #aaa; /* 提示文字颜色 */
  font-style: italic; /* 提示文字样式 */
}

</style>
